<template>
  <Modal title="快速下单" :width="800" :show-confirm-button="false">
    <div class="quick-order-modal">
      <div class="form-item">
        <label>手牌号:</label>
        <a-input
          v-model:value="formData.cardNumber"
          placeholder="请输入手牌号"
        />
      </div>

      <div class="order-items">
        <h4>订单项目</h4>
        <a-table
          :columns="tableColumns"
          :data-source="orderItems"
          :pagination="false"
          size="small"
        />
      </div>

      <div class="modal-actions">
        <a-button type="primary" @click="handleConfirm">确定</a-button>
        <a-button @click="handleCancel">取消</a-button>
      </div>
    </div>
  </Modal>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { message } from 'ant-design-vue';

defineOptions({
  name: 'QuickOrderModal',
});

interface Emits {
  (e: 'success'): void;
}

interface ModalPayload {
  cardNumber?: string;
}

const emit = defineEmits<Emits>();

const formData = ref({
  cardNumber: '',
});

const tableColumns = [
  { title: '商品名称', dataIndex: 'name', key: 'name' },
  { title: '单价', dataIndex: 'price', key: 'price' },
  { title: '数量', dataIndex: 'quantity', key: 'quantity' },
  { title: '小计', dataIndex: 'subtotal', key: 'subtotal' },
];

const orderItems = ref([
  {
    key: '1',
    name: '可口可乐',
    price: '8.00',
    quantity: 1,
    subtotal: '8.00',
  },
]);

const [Modal, modalApi] = useVbenModal({
  showCancelButton: false,
  showConfirmButton: false,
  async onOpenChange(isOpen) {
    if (!isOpen) {
      return;
    }
    const data = modalApi.getData<ModalPayload>();
    formData.value.cardNumber = data?.cardNumber || '';
  },
});

const handleConfirm = () => {
  message.success('下单成功');
  emit('success');
  modalApi.close();
};

const handleCancel = () => {
  modalApi.close();
};
</script>

<style scoped>
.quick-order-modal {
  padding: 20px 0;
}

.form-item {
  margin-bottom: 20px;
}

.form-item label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}

.order-items {
  margin-bottom: 20px;
}

.order-items h4 {
  margin-bottom: 15px;
  color: #333;
}

.modal-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 30px;
}
</style>
